<template>
    <div class="nav-menus Default">
        <div class="h100" target="_blank" title="预览" @click="preview">
            <div class="nav-menu-item">
                <Icon class="nav-menu-icon" name="el-icon-Monitor" size="18" />
            </div>
        </div>
        <div class="h100" target="_blank" title="保存" v-if="showAdd" @click="add">
            <div class="nav-menu-item">
                <Icon class="nav-menu-icon" name="el-icon-CirclePlus" size="18" />
            </div>
        </div>
        <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
            <Icon class="nav-menu-icon" v-if="state.isFullScreen" name="local-full-screen-cancel" size="18" />
            <Icon class="nav-menu-icon" v-else name="el-icon-FullScreen" size="18" />
        </div>
    </div>
</template>

<script  setup>
import { reactive } from 'vue'
import screenfull from 'screenfull'
import { userCardStore } from '../../store/userCardStore'
import { insertPage, updatePage } from '/@/api/page'
import { GetQueryString } from '../../utils/utils'
import { ElNotification } from 'element-plus'

const cardStore = userCardStore()
const preview = () => {
    // 整理保存页面数据
    cardStore.savePage()
    window.open('/uem/async/src/pages/preview/index.html')
}
const state = reactive({
    isFullScreen: false,
    currentNavMenu: '',
    showLayoutDrawer: false,
    showAdminInfoPopover: false,
})


const onFullScreen = () => {
    screenfull.toggle()
    screenfull.onchange(() => {
        state.isFullScreen = screenfull.isFullscreen
    })
}
const showAdd = GetQueryString('showAdd')
const add = async () => {
    const pid = GetQueryString('pid')
    const json = cardStore.getPageJson()
    if (pid) {
        // 更新
        const res = await updatePage(pid, {
            icon: json.icon,
            name: json.name,
            content: json
        })

    } else {
        // 添加
        const res = await insertPage({
            icon: json.icon,
            name: json.name,
            content: json
        })
    }
    ElNotification({
        title: 'Success',
        message: '保存成功',
        type: 'success',
    })
}
</script>

<style scoped lang="less">
.nav-menus.Default {
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.nav-menus {
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: auto;
    background-color: #ffffff;

    .h100 {
        height: 100%;
    }

    .nav-menu-item {
        height: 100%;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .nav-menu-icon {
            box-sizing: content-box;
            color: #333;
        }

        &:hover {
            .icon {
                animation: twinkle 0.3s ease-in-out;
            }
        }
    }

    .admin-info {
        display: flex;
        height: 100%;
        padding: 0 10px;
        align-items: center;
        cursor: pointer;
        user-select: none;
        color: #333;
    }

    .admin-name {
        padding-left: 6px;
        white-space: nowrap;
    }

    .nav-menu-item:hover,
    .admin-info:hover,
    .nav-menu-item.hover,
    .admin-info.hover {
        background: #f5f5f5;
    }
}

.dropdown-menu-box :deep(.el-dropdown-menu__item) {
    justify-content: center;
}

.admin-info-base {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;

    .admin-info-other {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0;

        .admin-info-name {
            font-size: var(--el-font-size-large);
        }
    }
}

.admin-info-footer {
    padding: 10px 0;
    margin: 0 -12px -12px -12px;
    display: flex;
    justify-content: space-around;
}

.pt2 {
    padding-top: 2px;
}

@keyframes twinkle {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
</style>
